<template>
  <div class="edit-mobile">
    <span class="value mobile" @click="visible = true" v-if="type === 'text'">{{ currentUser.phonenumber }}</span>
    <a-button @click="visible = true" v-if="type === 'button'">手机号修改</a-button>
    <c-modal :visible.sync="visible" v-if="visible" title="通过短信验证修改手机号" @ok="ok" @close="close" :okText="step === 0 ? '下一步' : '保存'">
      <div v-if="step === 0" class="input-div" key="input-div-0">
        <div class="old-mobile">手机号：{{ this.currentUser.phonenumber }}</div>
        <c-send-code class="row" :phonenumber="currentUser.phonenumber" v-model="code" @afterSend="getCodeInfo"></c-send-code>
      </div>
      <div v-else class="input-div" key="input-div-1">
        <div class="row">
          <a-input placeholder="请输入新手机号" v-model="phonenumber" allow-clear></a-input>
        </div>
        <c-send-code class="row" :phonenumber="phonenumber" v-model="code" @afterSend="getCodeInfo"></c-send-code>
      </div>
    </c-modal>
  </div>
</template>

<script lang="ts">
import Base from "@/controllers/base.ts";
import { Component, Prop } from "vue-property-decorator";
import { Input, Button } from "ant-design-vue";
import CModal from "@/components/CModal/index.vue";
import CSendCode from "@/components/CSendCode/index.vue";

@Component({
  name: "Safe",
  components: {
    CModal,
    CSendCode,
    AButton: Button,
    AInput: Input
  }
})
export default class EditMobile extends Base {
  // text, button
  @Prop({ default: "text" }) type!: string;

  private visible = false;
  private code = "";
  private uuid = "";
  private phonenumber = "";

  /**
   * 0: 旧手机验证码发送
   * 1: 新手机验证码，以及手机号填写
   */
  private step = 0;

  private beforeSave() {
    this.$message.destroy();
    if (!this.phonenumber || !this.$tools.checkPhone(this.phonenumber)) {
      this.$message.error("您的手机号码格式不正确");
      return false;
    }

    if (!this.uuid) {
      this.$message.error("请先发送验证码");
      return false;
    }

    if (!this.code) {
      this.$message.error("请填写验证码");
      return false;
    }

    return true;
  }

  private async save() {
    if (this.beforeSave()) {
      const res = await this.$api.UpdatePhonenumber({
        phonenumber: this.phonenumber,
        code: this.code,
        uuid: this.uuid
      });

      if (res && res.code === 200) {
        this.updateUser(true);
        this.visible = false;
        this.close();
        this.$message.success("修改成功");
      }
    }
  }

  /**
   * 修改手机号的时候，第一步先填写旧手机收到的验证码，进行校验
   */
  private async codeVerify() {
    if (!this.uuid) {
      this.$message.error("请先发送验证码");
      return false;
    }

    if (!this.code) {
      this.$message.error("请填写验证码");
      return false;
    }

    const res = await this.$api.CodeVerify({
      phonenumber: this.currentUser.phonenumber,
      code: this.code,
      uuid: this.uuid
    });

    if (res && res.code === 200) {
      this.uuid = "";
      this.code = "";
      this.step = 1;
    }
  }

  private ok() {
    if (this.step === 0) {
      this.codeVerify();
    } else {
      this.save();
    }
  }

  private close() {
    this.init();
  }

  /**
   * 发送完短信验证码后的回调函数，用来获取接口返回的相关数据
   */
  private getCodeInfo(obj: any) {
    this.uuid = obj.uuid;
  }

  // 初始化修改手机弹框
  private init() {
    this.step = 0;
  }
}
</script>

<style lang="less" scoped>
@import "~@/assets/style/mixin.less";
.edit-mobile {
  .mobile {
    cursor: pointer;
    display: flex;
    align-items: center;
    padding: 3px 6px;
    border-radius: 2px;
    margin-left: -3px;

    background-color: #f8fafd;
    &::after {
      font-family: "iconfont";
      content: "\e660";
      color: #64acfb;
      margin-left: 6px;
    }
  }
}

.c-modal {
  /deep/.ant-input {
    border: 0;
  }
  .input-div {
    .scale(margin-left, 74px);
    .scale(margin-right, 74px);
    .scale(padding-top, 30px);

    .row {
      .scale(margin-bottom, 30px);
      border: 1px solid #ebebeb;
      border-radius: 2px;
      display: flex;
      align-items: center;
      color: white;
      height: 36px;
      line-height: 36px;

      &:last-child {
        margin-bottom: 0;
      }
    }

    .ant-input-affix-wrapper {
      height: 100%;
    }

    /deep/.ant-input {
      border: 0;
      height: 100%;
    }

    .send-btn {
      cursor: pointer;
      padding: 0 16px;
      flex-shrink: 0;
      height: 100%;
      border-radius: 0;
    }
  }
  .old-mobile {
    margin-bottom: 16px;
    color: #666;
  }
}
</style>
